<template>  
  <view class="custom-tab-bar"> 
    <!-- 你的tabBar布局 -->  
	<view class="tab-bar-item-list">
		<view class="tab-bar-item" v-for="(item, index) in list" 
			 :key="index" @click="switchTab(index)">  
			<view class="icon-image" v-if="!item.isSelect">
				<image :src="'../../' + item.iconPath" mode=""></image>
			</view>
			<view class="icon-image" v-if="item.isSelect">
				<image :src="'../../' + item.selectedIconPath" mode=""></image>
			</view>
			<view class="icon-text">
				{{item.text}}
			</view>
		</view>  
	</view>
  </view>  
</template>  
  
<script>  
export default {  
  name: 'custom-tab-bar',
  data() {  
    return {  
      selected: 0,  
      list: [
      	{
      		"pagePath": "pages/index/index",
      		"text": "首页",
      		"iconPath": "static/icon/index.png",
      		"selectedIconPath": "static/icon/index-select.png",
			"isSelect": false
      	},
      	{
      		"pagePath": "pages/product/product",
      		"text": "释镜",
      		"iconPath": "static/icon/product.png",
      		"selectedIconPath": "static/icon/product-select.png",
			"isSelect": false
      	},
      	{
      		"pagePath": "pages/ai/ai",
      		"text": "禅问答",
      		"iconPath": "static/icon/ai.png",
      		"selectedIconPath": "static/icon/ai-select.png",
			"isSelect": false
      	},
      	{
      		"pagePath": "pages/live/live",
      		"text": "直播",
      		"iconPath": "static/icon/live.png",
      		"selectedIconPath": "static/icon/live-select.png",
			"isSelect": false
      	},
      	{
      		"pagePath": "pages/my/my",
      		"text": "我的",
      		"iconPath": "static/icon/my.png",
      		"selectedIconPath": "static/icon/my-select.png",
			"isSelect": false
      	}
      ]
    };  
  }, 
  created() {
	  console.log("tabbar被加载了")
  	this.list.filter(item => {
  		item.isSelect = false;
  	})
	var index = uni.getStorageSync("tabbarindex")
	if(index) {
		this.list[index].isSelect = true;
	}else {
		this.list[0].isSelect = true;
	}
  },
  methods: {  
	switchTab(index) {  
		this.list.filter(item => {
			item.isSelect = false;
		})
		uni.setStorageSync("tabbarindex", index)
		// 调用uni-app提供的API来切换tab  
		uni.switchTab({  
			url: `/${this.list[index].pagePath}`  
		});  
	}
  },
}  
</script>  
  
<style scoped>  
image {
	width: 100%;
	height: 100%;
}
.custom-tab-bar {
	overflow: hidden;
	box-sizing: border-box;
	width: 750rpx;
	height: 10vh;
/* 	position: fixed;
	bottom: 0; */
}
.tab-bar-item-list {
	overflow: hidden;
	box-sizing: border-box;
	width: 750rpx;
	height: 8vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.tab-bar-item {
	overflow: hidden;
	box-sizing: border-box;
	padding-top: 1vh;
	width: 120rpx;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}
.icon-image {
	width: 50rpx;
	height: 50rpx;
}
.icon-text {
	font-size: 12px;
}
</style>